<template>
  <div class="behavioural-analysis">
    <el-tabs v-model="activeTab" @tab-click="changeTab">
      <el-tab-pane label="分析模型" name="behaviorAnalysis">
        <div class="second-tab">
          <div v-for="(item, index) in secondTabList" :key="index" :class="secondActiveIndex == index + 1
              ? 'second-tab-item-active'
              : 'second-tab-item'
            " @click="changeSecondTab(index + 1, item.name)">
            {{ item.name }}
          </div>
        </div>
      </el-tab-pane>
    </el-tabs>
    <div class="table-box">
      <div class="table">
        <el-form :model="form" ref="form" size="medium" label-width="80px" class="demo-form">
          <el-row :gutter="20">
            <el-col :xs="12" :sm="12" :md="8" :lg="6" :xl="4">
              <el-form-item label="事件名称">
                <el-input style="width: 100%" v-model="form.eventName" placeholder="请输入事件名称"
                  @keyup.native.enter="handleSearch" clearable></el-input>
              </el-form-item>
            </el-col>
            <el-col :xs="12" :sm="12" :md="8" :lg="6" :xl="6">
              <el-form-item label="查询时间">
                <el-date-picker style="width: 100%" type="daterange" :picker-options="pickerOptions"
                  v-model="form.searchTime" :clearable="true" valueFormat="yyyy-MM-dd" start-placeholder="开始日期"
                  end-placeholder="结束日期" @change="handleSearch">
                </el-date-picker>
              </el-form-item>
            </el-col>
            <el-col :xs="12" :sm="12" :md="8" :lg="6" :xl="4">
              <el-button type="primary" size="medium" @click="handleSearch">查询</el-button>
            </el-col>
          </el-row>
        </el-form>
        <div :style="{ height: tableHeight + 'px' }">
          <el-table :data="tableData" v-loading="loading" height="100%" style="width: 100%; margin-top: 12px">
            <!-- <el-table-column prop="etName" label="分析名称" min-width="20%">
          </el-table-column> -->
            <el-table-column prop="etName" label="分析事件" show-overflow-tooltip min-width="190px">
            </el-table-column>
            <el-table-column prop="statTime" label="统计时间" show-overflow-tooltip min-width="100px">
            </el-table-column>
            <el-table-column prop="openNum" label="打开次数" min-width="80">
            </el-table-column>
            <el-table-column prop="openPersonNum" label="打开人数" min-width="80">
            </el-table-column>
            <el-table-column prop="stayTime" label="停留时长(s)" min-width="80">
            </el-table-column>
            <el-table-column prop="shareNum" label="分享次数" min-width="80">
            </el-table-column>
            <el-table-column prop="sharePersonNum" label="分享人数" min-width="80">
            </el-table-column>
            <el-table-column prop="shareOpenNum" label="分享打开次数" min-width="80">
            </el-table-column>
            <el-table-column prop="visitorNum" label="分享打开人数" min-width="80">
            </el-table-column>
            <el-table-column prop="newUsersNum" label="新增用户数" min-width="80">
            </el-table-column>
            <el-table-column prop="operation" label="操作" fixed="right" width="80px">
              <template slot-scope="scope">
                <div class="operation" @click="jumpToAnalyzeData(scope.row)">
                  <span>分析</span>
                </div>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>
      <div class="pager">
        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
          :current-page="page.currentPage" :page-sizes="page.pageSizes" :page-size="page.pageSize"
          layout="total, sizes, prev, pager, next, jumper" :total="page.sums" background></el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
import page from "@/mixin/page";
import { actCountList, getEventType } from "@/api/index";
export default {
  name: "AnalysisModel",
  mixins: [page],
  data() {
    return {
      activeTab: "behaviorAnalysis",
      secondTabList: [
        {
          name: "事件分析",
        },
        // {
        //   name: "漏斗分析",
        // },
      ],
      secondActiveIndex: 1,
      secondTabName: "事件分析",
      tableData: [
        {
          analyzeName: "未命名",
          analyzeEvent:
            "营销页（advertise）；基础监控（wxdata_perf_monitor）；",
          editTime: "2024-03-20",
          operation: "分析",
          index: 0,
        },
        {
          analyzeName: "未命名",
          analyzeEvent:
            "营销页（advertise）；基础监控（wxdata_perf_monitor）；",
          editTime: "2024-03-20",
          operation: "分析",
          index: 1,
        },
        {
          analyzeName: "未命名",
          analyzeEvent:
            "营销页（advertise）；基础监控（wxdata_perf_monitor）；",
          editTime: "2024-03-20",
          operation: "分析",
          index: 2,
        },
        {
          analyzeName: "未命名",
          analyzeEvent:
            "营销页（advertise）；基础监控（wxdata_perf_monitor）；",
          editTime: "2024-03-20",
          operation: "分析",
          index: 3,
        },
      ],
      searchEvent: "",
      form: {
        searchTime: [],
        source: "",
      },
      loading: false,
      tableHeight: "auto",
    };
  },
  computed: {
    pickerOptions() {
      return {
        onPick: ({ maxDate, minDate }) => {
          // 把选择的第一个日期赋值给一个变量。
          this.choiceDate = minDate.getTime();
          // 如何你选择了两个日期了，就把那个变量置空
          if (maxDate) this.choiceDate = "";
        },
        disabledDate: (time) => {
          // 如何选择了一个日期
          if (this.choiceDate) {
            // 31天的时间戳
            const one = 31 * 24 * 3600 * 1000;
            // 当前日期 - one = 7天之前
            const minTime = this.choiceDate - one;
            // 当前日期 + one = 7天之后
            const maxTime = this.choiceDate + one;
            return (
              time.getTime() < minTime ||
              time.getTime() > maxTime ||
              // 限制不能选择今天及以后
              time.getTime() > Date.now()
            );
          } else {
            // 如果没有选择日期，就要限制不能选择今天及以后
            return time.getTime() > Date.now();
          }
        },
      };
    },
  },
  methods: {
    handleCurrentChange(val) {
      this.page.currentPage = val;
      this.getData();
    },
    getHeight() {
      this.tableHeight = window.innerHeight - 360;
    },
    async getDefaultTime() {
      const startTime = this.getNthDay();
      const endTime = this.getCurrentDay();
      this.form.searchTime = [startTime, endTime];
    },
    //设置默认日期
    getNthDay() {
      let myDate = new Date();
      let lw = new Date(myDate - 1000 * 60 * 60 * 24 * 31); //最后一个数字30可改，30天的意思
      let lastY = lw.getFullYear();
      let lastM = lw.getMonth() + 1;
      let lastD = lw.getDate();
      let startData =
        lastY +
        "-" +
        (lastM < 10 ? "0" + lastM : lastM) +
        "-" +
        (lastD < 10 ? "0" + lastD : lastD); //三十天之前日期
      return startData;
    },
    // 获取当天日期
    getCurrentDay() {
      var date = new Date();
      var month = parseInt(date.getMonth() + 1);
      var day = date.getDate();
      if (month < 10) month = "0" + month;
      if (day < 10) day = "0" + day;
      return date.getFullYear() + "-" + month + "-" + day;
    },
    handleSearch() {
      console.log("这里触发了搜索", this.form);
      this.page.currentPage = 1;
      this.getData();
    },
    async getEventType() {
      const params = {};
      const res = await getEventType(params);
      if (res.code == 200) {
        console.log("res", res);
      }
    },
    async getData() {
      this.loading = true;
      const params = {
        currentStartTime:
          Array.isArray(this.form.searchTime) && this.form.searchTime.length
            ? this.form.searchTime[0] + " 00:00:00"
            : "",
        currentEndTime:
          Array.isArray(this.form.searchTime) && this.form.searchTime.length
            ? this.form.searchTime[1] + " 23:59:59"
            : "",
        eventName: this.form.eventName,
        pageNo: this.page.currentPage,
        pageSize: this.page.pageSize,
        eventType: 20,
      };
      const res = await actCountList(params);
      this.loading = false;
      if (res.code == 200) {
        this.tableData = res.data;
        this.page.sums = res.pageparam.sums;
      }
    },
    changeSecondTab(index, name) {
      this.secondActiveIndex = index;
      this.secondTabName = name;
    },
    changeTab(tab, event) {
      console.log(tab, event);
    },
    jumpToAnalyzeData(row) {
      sessionStorage.setItem("analyzeData", JSON.stringify(row));
      this.$emit("jumpToAnalyzeData");
    },
  },
  activated() {
    window.addEventListener("resize", this.getHeight);
    this.getHeight();
  },
  async created() {
    window.addEventListener("resize", this.getHeight);
    await this.getDefaultTime();
    this.getData();
  },
  mounted() {
    this.getHeight();
  },
  destroyed() {
    window.removeEventListener("resize", this.getHeight);
  },
};
</script>

<style lang="scss" scoped>
.behavioural-analysis {
  background: url("../../../../assets/images/bigBg.png") no-repeat;
  background-position: center;
  background-size: 100% 100%;
  padding: 12px;

  .second-tab {
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 0 18px;

    .second-tab-item {
      cursor: pointer;
      margin-right: 30px;
    }

    .second-tab-item-active {
      margin-right: 30px;
      color: #7052ff;
      cursor: pointer;
    }
  }

  .table-box {
    width: 100%;
    margin-top: 14px;
    padding: 8px 12px;
    box-sizing: border-box;
    background-color: #fff;
    border-radius: 8px;

    .table {
      width: 100%;
      border-radius: 8px;
      padding: 12px;
      background: #ffffff;

      /deep/ .el-input--medium {
        width: 200px;
      }

      /deep/ .el-table__header-wrapper {
        height: 60px;
      }

      /deep/ .el-table__body-wrapper {
        height: calc(100% - 60px) !important;
      }

      .operation {
        display: flex;
        flex-direction: row;
        align-items: center;

        span {
          color: blue;
          cursor: pointer;
        }
      }
    }
  }

  /deep/ .el-tabs__header {
    margin: 14px 0 0 0;
  }

  /deep/ .el-tabs__header .el-tabs__nav-wrap {
    background-color: #ffffff;
    border-radius: 8px 8px 0px 0px;
  }

  /deep/ .el-tabs__content {
    background: #f9f9f9;
    border-radius: 0px 0px 8px 8px;
    border: 1px solid #fafafa;
    height: 40px;
    line-height: 40px;
  }
}
</style>
